<template>
  <div class="home">
    <Header head-title="预约挂号" go-back="true"></Header>
    <section class="bg_blue Registed">
      <section class="Select fa">
        <section>
          <img class="HosIcon" src="../../assets/img/41692556-8.jpg" alt="">
        </section>
        <section class="fontCfff doctorCon">
          <h3 class="fontsM">刘艳晓</h3>
          <p class="fonts">平顶山市第一人民医院</p>
          <el-rate class="score" v-model="value" disabled show-score text-color="#fff" score-template="好评率{value}"></el-rate>
        </section>
        <section class="Selects attent">
          <el-button size="small">关注</el-button>
          <div @click="DoctorHome()" class="attention fonts fontCfff">主页 ></div>
        </section>
      </section>
      <section class="fonts fontCfff bg_blue doctorDepart">
        <h2 class="fontsM">主治医师：内分泌代谢科</h2>
        <p>擅长：糖尿病，甲状腺，肾上腺，脑垂体等疾病的诊治，尤其对糖尿病，甲状腺疾病...</p>
      </section>
    </section>
    <section class="group">
      <h3 class="HomeH fonts">刘艳晓 - 平顶山市第一人民医院</h3>
      <div class="selectDate Select">
        <div class="fonts activecolor Datetitle SelectS">
          <p class="DoctorP">就诊日期</p>
          <p class="DoctorPM fontC6">上午</p>
          <p class="fontC6">下午</p>
        </div>
        <div class="DateSele">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide class="swiperDate borderR" v-for="(item, index) in SwiperDateList" :key="index">
              <section>
                <div class="SelectS">
                  <p class="fonts">{{item.week}}</p>
                  <p class="fonts">{{item.date}}</p>
                  <div class="Depart fonts fontCfff" :class="item.numM == '有号' ? 'YesDepart': 'NoDepart'" @click="Doctor(item.numM)">
                    {{ item.numM == '无号' ? '无号' :'预约' }}
                  </div>
                  <div class="fonts Depart fontCfff" :class="item.numA == '有号' ? 'YesDepart': 'NoDepart'"  @click="DoctorA(item.numA)">
                    {{ item.numA == '无号' ? '无号' :'预约' }}
                  </div>
                </div>
              </section>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </section>
    <section class="group">
      <h3 class="HomeH fonts">预约规则</h3>
      <p class="fonts fontC Ass_p">预约规则：提前一天预约</p>
    </section>
    <section class="group">
      <h3 class="HomeH fonts">医院规则</h3>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
      <p class="fonts fontC Ass_p">1、放号时间：每天8:30</p>
    </section>
  </div>
</template>

<script>
import Header from '../../components/Header'

export default {
  data () {
    return {
      value: 3.7,
      label: -1,
      SwiperDateList: [
        { week: '周一', date: '3月21号', numM: '无号', numA: '有号' },
        { week: '周二', date: '3月22号', numM: '无号', numA: '有号' },
        { week: '周三', date: '3月23号', numM: '有号', numA: '无号' },
        { week: '周四', date: '3月24号', numM: '有号', numA: '有号' },
        { week: '周五', date: '3月25号', numM: '无号', numA: '有号' },
        { week: '周六', date: '3月26号', numM: '有号', numA: '无号' },
        { week: '周日', date: '3月27号', numM: '有号', numA: '有号' }
      ],
      //  swiper 触摸滑动
      swiperOptions: {
        slidesPerView: 2,
        spaceBetween: 10,
        breakpoints: {
          320: { // 当屏幕宽度大于等于320
            slidesPerView: 3,
            spaceBetween: 1
          },
          768: { // 当屏幕宽度大于等于768
            slidesPerView: 5,
            spaceBetween: 20
          },
          1280: { // 当屏幕宽度大于等于1280
            slidesPerView: 6,
            spaceBetween: 30
          }
        }
      }
    }
  },
  components: {
    Header
  },
  methods: {
    Doctor (numM) {
      if (numM === '有号') {
        this.$router.push({
          path: '/Reservation'
        })
      } else {

      }
    },
    DoctorA (numA) {
      if (numA === '有号') {
        this.$router.push({
          path: '/Reservation'
        })
      } else {

      }
    },
    DoctorHome () {
      this.$router.push({
        path: '/Doctor'
      })
    }
  }
}
</script>

<style scoped>
.home {
background: none;
}
.group1 {
    padding-top: 0;
    margin-top: 0;
}
.Registed {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
.fa {
  align-items: flex-start;
}
.HosIcon {
  width: 1.2rem;
  height: 1.2rem;
}
</style>
